<template>
  <div class="table">
    <div class="content-common">
      <div class="search-top">
        <el-form :label-position="'top'" :inline="true" :model="query">
          <el-form-item label="测站类型" prop="stType">
            <el-select clearable style="width: 140px" v-model="query.stType" placeholder="请选择">
              <el-option label="坡面径流场" :value="1"> </el-option>
              <el-option label="小流域控制站" :value="2"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="测站">
            <el-select clearable style="width: 250px" v-model="query.stcd" placeholder="请选择">
              <el-option v-show="item.stType == query.stType" v-for="item in stationData" :key="item.value" :label="item.stnm" :value="item.stcd"> </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="开始时间">
            <el-date-picker value-format="YYYY-MM-DD" style="width: 140px" v-model="query.tmBegin" type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker value-format="YYYY-MM-DD" style="width: 140px" v-model="query.tmEnd" type="date" placeholder="选择日期"> </el-date-picker>
          </el-form-item>
          <el-form-item class="search-btn">
            <el-button
              class="table-btn-blur"
              @click="
                page.currentPage = 1;
                getData();
              "
              >查询</el-button
            >
          </el-form-item>
        </el-form>

        <div class="right-search">
          <el-button style="margin-right: 6px" type="primary" icon="download" @click="dcmb">下载模板</el-button>
          <el-upload style="margin-right: 6px" :headers="headers" :data="updata" :action="daoruUrl" :show-file-list="false" :on-success="filesuccess">
            <el-button icon="upload" type="primary">批量导入</el-button>
          </el-upload>
          <!-- <el-button  type="primary" icon="download" @click="daochuexcell">导出记录</el-button> -->

          <el-button type="primary" class="table-btn-blur" @click="handleAdd()">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" border class="table-common" header-cell-class-name="table-header">
        <el-table-column prop="stnm" label="测站名称"></el-table-column>
        <el-table-column prop="tm" label="监测时间 "></el-table-column>
        <el-table-column prop="drp" label="时段降水量（mm）"></el-table-column>
        <el-table-column prop="dyp" label="日降水量（mm）"></el-table-column>
        <el-table-column prop="pdr" label="时段长（h）"></el-table-column>
        <el-table-column prop="intv" label="降水历时"></el-table-column>
        <el-table-column prop="source" label="数据来源"></el-table-column>
        <el-table-column prop="wth" label="天气状况">
          <template #default="scope">
            <div v-if="scope.row.wth == 5">雪</div>
            <div v-if="scope.row.wth == 6">雨夹雪</div>
            <div v-if="scope.row.wth == 7">雨</div>
            <div v-if="scope.row.wth == 8">阴</div>
            <div v-if="scope.row.wth == 9">晴</div>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="220">
          <template #default="scope">
            <el-button type="success" class="table-btn-success" @click="handleEdit(scope.row)">编辑</el-button>

            <el-button type="danger" class="table-btn-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-row type="flex" justify="end">
        <el-pagination background v-model:currentPage="page.currentPage" @current-change="getData" layout="prev,total, pager, next" :total="page.totalSize"> </el-pagination>
      </el-row>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog :title="logTitle" v-model="editVisible" width="860px">
      <el-form ref="form" :rules="rules" :model="form" label-width="160px" label-position="top">
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="测站类型" prop="stType">
              <el-select @change="typeChange" style="width: 100%" v-model="form.stType" placeholder="请选择">
                <el-option label="坡面径流场" value="1"> </el-option>
                <el-option label="小流域控制站" value="2"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="测站" prop="stcd">
              <el-select style="width: 100%" v-model="form.stcd" placeholder="请选择">
                <el-option v-show="item.stType == form.stType" v-for="item in stationData" :key="item.value" :label="item.stnm" :value="item.stcd"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="监测时间" prop="tm">
              <el-date-picker v-model="form.tm" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="监测时间"> </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" justify="space-between">
          <el-col :span="7">
            <el-form-item label="日降水量（mm）" prop="dyp">
              <el-input v-model="form.dyp" placeholder="日降水量（mm）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="时段降水量（mm）" prop="drp">
              <el-input v-model="form.drp" placeholder="时段降水量（mm）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="时段长（h）">
              <el-input v-model="form.intv" placeholder="时段长（h）"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="数据来源">
              <el-input v-model="form.source" placeholder="数据来源"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="降水历时" prop="pdr">
              <el-input v-model="form.pdr" placeholder="降水历时"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="天气状况" prop="wth">
              <el-select style="width: 100%" v-model="form.wth" filterable placeholder="请选择">
                <el-option label="雪" value="5"> </el-option>
                <el-option label="雨夹雪" value="6"> </el-option>
                <el-option label="雨" value="7"> </el-option>
                <el-option label="阴" value="8"> </el-option>
                <el-option label="晴" value="9"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import {
  soilWatermanagerainfallMonitordownloaddownloadRainfallMonitorTemp,
  sysdictviewlistDictItem,
  reportfieldManageeditdoApprove,
  reportfieldManageeditrevokeRecord,
  reportfieldManageeditsubmitRecord,
  viewPageStationInfo,
  rainfallImportRainfallDaily,
  soilWatermanagerainfallMonitorviewpageRainfallMonitorData,
  soilWatermanagerainfallMonitorsavesaveRainfallMonitorData,
  soilWatermanagerainfallMonitorremovedelRainfallMonitorData
} from '../../../api/index';
import moment from 'moment';
export default {
  name: 'zhengbianhanshuizhibeigaidu',
  data() {
    return {
      updata: {
        stcd: stationInfo.stcd,
        stType: systype
      },
      daoruUrl: globalVar.xiaoliuyubaseURL + '/soilWater/manage/rainfallMonitor/save/importRainfallMonitorData',
      headers: {
        Authorization: sessionStorage['token']
      },
      tijiaorule: {
        status: [{ required: true, message: '必填项', trigger: 'change' }]
      },
      rules: {
        stcd: [{ required: true, message: '必填项', trigger: 'change' }],
        stType: [{ required: true, message: '必填项', trigger: 'change' }],
        drp: [{ required: true, message: '必填项', trigger: 'change' }],
        tm: [{ required: true, message: '必填项', trigger: 'change' }],
        dyp: [{ required: true, message: '必填项', trigger: 'change' }]
      },
      shenpilog: false,
      globalUser: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      query: {},
      excelllog: false,
      formInline: {},
      tableData: [],

      editVisible: false,
      logTitle: '',
      pageTotal: 0,
      form: {
        stType: 1
      },
      stationData: [],
      checkArr: [],
      tijiaoform: {
        status: 1
      },
      selnow: {}
    };
  },
  created() {
    this.globalUser = globalUser;
    let that = this;
    this.query.year = globalyear;
    that.getData();
    this.getstationData();
    this.getchecktype();
  },
  methods: {
    typeChange() {
      this.form.stcd = '';
    },
    filesuccess(e) {
      if (e.code == 5000) {
        this.$message.error(e.object);
      } else {
        this.$message.success('操作成功');
      }

      this.getData();
    },
    dcmb() {
      // let that=this
      // soilWatermanagerainfallMonitordownloaddownloadRainfallMonitorTemp().then(res=>{
      // 	const filename = '降雨监测数据导入模板.xlsx';
      // 	const blob = new Blob([res]);
      // 	var downloadElement = document.createElement("a");
      // 	var href = window.URL.createObjectURL(blob);
      // 	downloadElement.href = href;
      // 	downloadElement.download = filename;
      // 	document.body.appendChild(downloadElement);
      // 	downloadElement.click();
      // 	document.body.removeChild(downloadElement);
      // 	window.URL.revokeObjectURL(href);

      // }).catch(err=>{
      // 	console.log(err)
      // })
      let url = globalVar.xiaoliuyubaseURL + '/soilWater/manage/rainfallMonitor/download/downloadRainfallMonitorTemp';
      var options = {
        url: url,
        method: 'post',
        responseType: 'blob',
        headers: {
          Authorization: sessionStorage.getItem('token')
        }
      };
      axios(options).then((res) => {
        if (res) {
          const link = document.createElement('a');
          let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); //生成blob对象
          link.style.display = 'none';
          link.href = URL.createObjectURL(blob);
          const fileName = '降雨监测数据导入模板';
          link.setAttribute('download', `${fileName}` + '.xlsx'); //下载的文件名以及文件格式
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
        } else {
          console.log('下载失败');
        }
      });
    },
    tomingxi(item) {
      this.$router.push({
        path: '/zhengbianjiangshuiguochengmingxi',
        query: item
      });
    },
    quedingtijiao() {
      this.tijiaoform.relatedNo = this.selnow.recordNo;
      let that = this;
      reportfieldManageeditdoApprove(that.tijiaoform)
        .then((e) => {
          that.$message.success('操作成功');
          that.shenpilog = false;
          that.getData();
        })
        .catch((e) => {
          console.log(err);
        });
    },
    getchecktype() {
      let that = this;
      sysdictviewlistDictItem({
        dictCode: 'ZD-000004'
      })
        .then((e) => {
          that.checkArr = e.object;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    shenpi(item) {
      this.tijiaoform.reviewer = item.reviewer;
      this.tijiaoform.relatedNo = item.recordNo;
      this.tijiaoform.approveType = 'R2';
      this.shenpilog = true;
      this.selnow = item;
    },
    getstationData() {
      let data = {
        currentPage: 1,
        pageSize: 1000
      };
      viewPageStationInfo(data).then((res) => {
        this.stationData = res.object.dataList;
      });
    },
    daorujiangyu() {
      let that = this;
      rainfallImportRainfallDaily(that.form)
        .then((e) => {
          console.log(e);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getData() {
      let data = {
        tmBegin: this.query.tmBegin,
        tmEnd: this.query.tmEnd,
        stType: this.query.stType,
        currentPage: this.page.currentPage,
        pageSize: 10,
        stcd: this.query.stcd,
        year: globalyear
      };
      soilWatermanagerainfallMonitorviewpageRainfallMonitorData(data).then((res) => {
        this.tableData = res.object.dataList;

        this.page = res.object.page;
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },
    // 删除操作
    handleDelete(row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          soilWatermanagerainfallMonitorremovedelRainfallMonitorData({
            id: row.id
          }).then((e) => {
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
    chehui(row) {
      this.$confirm('确定撤回吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          reportfieldManageeditrevokeRecord({
            headNo: row.recordNo
          })
            .then((e) => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    tijiao(row) {
      this.$confirm('确定提交吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          reportfieldManageeditsubmitRecord({
            headNo: row.recordNo
          })
            .then((e) => {
              this.getData();
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    // 编辑操作
    handleEdit(row) {
      row.year = String(row.year);
      this.form = row;
      this.form.stType = row.stType + '';
      this.logTitle = '编辑实时降雨';

      this.editVisible = true;
    },
    handleAdd() {
      this.logTitle = '新增实时降雨';
      this.form = {
        stType: systype,
        year: globalyear,
        status: 0,
        stcd: stationInfo.stcd
      };
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      let that = this;

      this.$refs['form'].validate((valid) => {
        if (valid) {
          soilWatermanagerainfallMonitorsavesaveRainfallMonitorData(that.form).then((e) => {
            this.editVisible = false;
            this.$message.success('操作成功');
            this.getData();
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.right-search {
  display: flex;
}
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
.search-btn {
  margin-top: 30px;
  width: auto !important;
}
.table-btn-blur {
  background: #3f8cff !important;
  border: 1px solid #3f8cff !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-success {
  background: #00b600 !important;
  border: 1px solid #00b600 !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-plain {
  background: #fff !important;
  border: 1px solid #3f8cff !important;
  border-radius: 2px;
  color: #3f8cff !important;
  font-size: 14px;
}
.table-btn-warning {
  background: #ff842f !important;
  border: 1px solid #ff842f !important;
  border-radius: 2px;
  color: #fff !important;
}
.table-btn-delete {
  background: #ff544e !important;
  border: 1px solid #ff544e !important;
  border-radius: 2px;
  color: #fff !important;
}
</style>

